<script setup lang="ts">
import { computed, ref } from 'vue';
import { RouterView, useRoute, useRouter, } from 'vue-router'
const route = useRoute()
const router = useRouter()
const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const defaultActive = computed(() => {
  return route.path.replace('/', '')
})
console.log(route);

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '63px' : '200px'">
        <el-menu :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :default-active="defaultActive"
          class="el-menu-vertical-demo" background-color="#eeee" @open="handleOpen" @close="handleClose" router>
          <template v-for="(item, index) in router.options.routes" :key="index">
            <el-menu-item :index="item.path"> 
              <el-icon>
                <setting />
              </el-icon>
               <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button v-if="isCollapse" :label="false">expand</el-radio-button>
            <el-radio-button v-else :label="true">collapse</el-radio-button>
          </el-radio-group>
        </el-header>
        <el-main>
          <!-- <Transition> -->
            <RouterView />
          <!-- </Transition> -->
        </el-main>
      </el-container>
    </el-container>
  </div>

  <!--  -->
</template>

<style scoped>
:deep .el-header {
  width: 100%;
  background-color: rgba(0, 255, 255, 0.421);
}

:deep .el-aside {
  height: 100vh;
  background-color: rgba(75, 86, 121, 0.511);
}
:deep .el-main{
  height: calc(100vh - 60px);
}
:deep .el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
:deep .el-menu--collapse{
  height: 100%;
}
</style>
